HLTech / judge-d-ui

import { DependencyLink, DependencyNode } from '../../components/types';

import { Simulation } from 'd3';

export type GraphContainer = d3.Selection<SVGSVGElement, DependencyNode, Element, HTMLElement>;

export function generateLinkPath(this: Element, link: DependencyLink): void {

    const sourceLabelWidth = getNodeDimension(link.source).width;

    const targetLabelWidth = getNodeDimension(link.target).width;

    if (!link.source.x || !link.source.y || !link.target.x || !link.target.y) {

        return;

    }

    const xDiff = link.source.x - link.target.x;

    const yDiff = link.source.y - link.target.y;

    const angle = Math.abs(Math.atan(yDiff / xDiff));

    const isSourceOnTheLeft = xDiff < 0;

    const isSourceBelowTarget = yDiff > 0;

    const cosinus = Math.cos(angle);

    const sinus = Math.sin(angle);

    const offsetXLeft = -50 * cosinus;

    const offsetYBelow = -50 * sinus - 5;

    const sourceNewX = isSourceOnTheLeft ? (sourceLabelWidth + 20) * cosinus : offsetXLeft;

    const sourceNewY = isSourceBelowTarget ? offsetYBelow : 50 * sinus;

    const targetNewX = isSourceOnTheLeft ? offsetXLeft : (targetLabelWidth + 20) * cosinus;

    const targetNewY = isSourceBelowTarget ? 50 * sinus : offsetYBelow;

    d3.select<Element, DependencyLink>(this)

        .attr(

            'd',

            'M' +

                (link.source.x + sourceNewX) +

                ',' +

                (link.source.y + sourceNewY) +

                ', ' +

                (link.target.x + targetNewX) +

                ',' +

                (link.target.y + targetNewY)

        )

        .attr('stroke', 'black');

}

export function generateMarkers(svgContainer: GraphContainer): void {

    svgContainer

        .append('svg:defs')

        .append('svg:marker')

        .attr('id', 'provider')

        .attr('viewBox', '-5 -5 40 10')

        .attr('refX', 15)

        .attr('refY', 0)

        .attr('markerWidth', 40)

        .attr('markerHeight', 40)

        .attr('orient', 'auto')

        .append('svg:path')

        .attr('d', 'M0,-5L20,0L0,5,q10 -5,0 -10')

        .attr('fill', 'rgba(44, 47, 51, 0.12)');

}

export function generateLabelPath(this: Node, node: DependencyNode) {

    const labelTextWidth = getLabelTextHeight.call(this, 'width');

    if (labelTextWidth === 0) {

        return '';

    }

    const { isConsumer, isProvider } = node;

    if (isConsumer && isProvider) {

        return 'M4.5,35l9.37,14.59L4.5,64.18h' + (labelTextWidth + 45) + 'l9-14.59L' + (labelTextWidth + 49.5) + ',35H4.5z';

    }

    if (isProvider) {

        return 'M' + (labelTextWidth + 49.5) + ',35H4.5l9.37,14.59L4.5,64.18h' + (labelTextWidth + 45);

    }

    if (isConsumer) {

        return 'M4.5,64.18h' + (labelTextWidth + 45) + 'l9.42-14.59L' + (labelTextWidth + 49.5) + ',35H4.5';

    }

    return 'M4.5,64.18h' + (labelTextWidth + 55) + 'L' + (labelTextWidth + 59.5) + ',35H4.5';

}

export function handleDrag(simulation: Simulation<DependencyNode, DependencyLink>) {

    function dragStarted(node: DependencyNode) {

        if (!d3.event.active) {

            simulation.alphaTarget(0.3).restart();

        }

        node.fx = node.x;

        node.fy = node.y;

    }

    function dragged(node: DependencyNode) {

        node.fx = d3.event.x;

        node.fy = d3.event.y;

    }

    function dragEnded(node: DependencyNode) {

        if (!d3.event.active) {

            simulation.alphaTarget(0);

        }

        node.fx = null;

        node.fy = null;

    }

    return d3

        .drag<SVGGElement, DependencyNode>()

        .on('start', dragStarted)

        .on('drag', dragged)

        .on('end', dragEnded);

}

export function createSimulation(nodes: DependencyNode[], links: DependencyLink[], width: number, height: number) {

    return d3

        .forceSimulation(nodes)

        .force(

            'dependency',

            d3

                .forceLink<DependencyNode, DependencyLink>(links)

                .distance(180)

                .id((node: DependencyNode) => node.name)

        )

        .force('center', d3.forceCenter(width / 2, height / 2))

        .force('y', d3.forceY(0.5))

        .force('collide', d3.forceCollide(140))

        .force('nodeCollide', d3.forceCollide(140));

}

export function createZoom(svgContainer: GraphContainer): d3.Selection<SVGGElement, DependencyNode, Element, HTMLElement> {

    const zoomLayer = svgContainer.append('g');

    const zoomed = () => {

        zoomLayer.attr('transform', d3.event.transform);

    };

    svgContainer

        .call(

            d3

                .zoom<SVGSVGElement, DependencyNode>()

                .scaleExtent([1 / 2, 12])

                .on('zoom', zoomed)

        )

        .on('dblclick.zoom', null);

    return zoomLayer;

}

export function getLabelTextHeight(this: Node, dim: 'width' | 'height') {

    const textNode = d3.select<SVGGElement, DependencyNode>(this.nextSibling as SVGGElement).node();

    if (!textNode) {

        return 0;

    }

    return dim === 'width' ? textNode.getBBox().width : textNode.getBBox().height;

}

export function getNodeDimension(selectedNode: DependencyNode): { width: number; height: number } {

    const foundNode = d3

        .select<SVGGElement, DependencyNode>('#labels')

        .selectAll<SVGGElement, DependencyNode>('g')

        .filter((node: DependencyNode) => node.x === selectedNode.x && node.y === selectedNode.y)

        .node();

    return foundNode ? foundNode.getBBox() : { width: 200, height: 25 };

}